<template>
  <div
    class="app-content">
    <div class="tab">
      <div
        class="item"
        v-for="(item,index) in tabList"
        :key="item"
        :class="{on: activeIndex === index}"
        @click="switchTab(index)">{{ item }}</div>
    </div>

    <div class="list">
        <template v-if="!$util.isEmpty(list.data)">
            <div
              class="item"
              v-for="(item, index) in list.data"
              :key="index">
              <div class="top_info">
                <div class="left">
                  <div class="img_wrap">
                    <img
                      v-if="item.is_public == 1"
                      :src="constant.imgUrl+'getguest/guest_btn.png'"
                      alt="">
                    <img
                      v-else
                      :src="item.user_info.user_picture"
                      alt="">
                  </div>
                  <div class="name">{{ item.user_info.user_name }}</div>
                </div>
                <div class="right">{{ item.publish_time }}</div>
              </div>
              <div class="content">
                <!-- ellipsis_two_line_com -->
                <p class="share_title">朋友圈推广：</p>
                <p class="txt">{{ (item.abbrTxt && !item.toggle) ? item.abbrTxt : item.copywritting }}<span
                  class="toggleBtn"
                  v-show="!item.toggle && item.abbrTxt"
                  @click="toggle(true,index)">&nbsp;&nbsp;...展开</span><span
                    class="toggleBtn"
                    v-show="item.toggle && item.abbrTxt"
                    @click="toggle(false,index)">&nbsp;&nbsp;>>>收起</span></p>
                <div class="imgs_wrap">
                  <div
                    class="img_item"
                    v-for="(imgItem,subIndex) in item.picture_list.image_url"
                    :key="imgItem"
                    @click="preview(item.picture_list.image_url,subIndex)">
                    <img
                      :src="imgItem"
                      alt="">
                  </div>

                </div>
                <p
                  class="info"
                  v-if="option.from !== 'inviteShop'">{{ item.share_num }}人已发圈</p>

              </div>
              <div class="option_bar">
                <div
                  class="btn del"
                  style="margin-left: 0"
                  v-if="item.is_public == 2"
                  @click="delItem(item.rm_id)">删除</div>
                <div
                  v-if="item.is_public == 2"
				  @click="toPublish(item.rm_id)"
                  class="btn edit">编辑</div>
                <div
                  class="btn downShare"
                  v-if="item.copywritting" @click="copy(item.copywritting)">复制内容</div>
                <div
                  class="btn downShare"
                  v-if="option.from!='inviteShop'"
                  @click="downloadPoster(item.rm_id,item.picture_list.image_url,index)">下载图片</div>
              </div>
            </div>
          </template>
          <app-wrapper-empty
            v-else
            title="暂无数据内容"
            :is-empty="$util.isEmpty(list.data)"/>
    </div>
    <!-- 添加按钮 -->
    <add-com-icon
      v-if="option.from!='inviteShop'"
      @add="toPublish"/>
  </div>
</template>

<script>

import { mapState } from 'vuex'
// import { getUrlHref } from '@/util/common';
import {
	getMaterialList, getInviteShopMaterialList, postDelMaterial, downloadPoster
} from '@/api/getGuest'
import { list } from '@/mixins'
import AppWrapperEmpty from '@/components/App_wrapper_empty'
import AddComIcon from '@/components/module/AddComIcon'
import qs from 'qs'

export default {
	name: 'ShareList',
	mixins: [list],
	components: {
		AppWrapperEmpty,
		AddComIcon
	},
	data() {
		return {
			tabList: ['全部', '平台', '我的'],
			activeIndex: 0,
			params: {},
			showAll: false,
			option: {},
			constant: this.$constant
		}
	},
	onLoad(option) {
		this.option = option
		this.option.title = decodeURIComponent(option.title)
		this.option.imgUrl = decodeURIComponent(option.imgUrl)
		if (option.cat_name) {
			this.option.cat_name = decodeURIComponent(option.cat_name)
		}
		if (this.isEnterprise) {
			this.tabList = ['全部', '平台', '我的', '企业']
		}
	},
	onShow() {
		switch (this.option.from) {
			case 'publish':
				this.setParams()
				this.activeIndex = 2
				break
			case 'inviteShop':
				this.tabList = ['平台']
				this.resetList()
				this.setParams(this.getList)
				break
			default :
				this.resetList()
				this.setParams(this.getList)
				break
		}
	},
	onPullDownRefresh() {
		this.resetList()
		if (this.option.from === 'inviteShop') {
			this.getList(getInviteShopMaterialList).then((res) => {
				uni.stopPullDownRefresh()
			})
		} else {
			this.getList(getMaterialList).then((res) => {
				uni.stopPullDownRefresh()
			})
		}
	},

	onReachBottom() {
		if (this.list.finished) {
			uni.showToast({
				title: '没有更多了',
				icon: 'none'
			})
			return
		}
		if (this.list.loading) {
			return
		}
		if (this.option.from === 'inviteShop') {
			this.getList(getInviteShopMaterialList)
		} else {
			this.getList(getMaterialList)
		}
	},
	watch: {
		activeIndex(val) {
			this.resetList()
			switch (val) {
				case 0:
					if (this.option.from === 'inviteShop') {
						this.getList(getInviteShopMaterialList)
					} else {
						this.params.role_type = ''
					}
					break
				case 1:
					this.params.role_type = 'platform'
					break
				case 2:
					this.params.role_type = 'my'
					break
				case 3:
					this.params.role_type = 'commpany'
					break
				default:
					break
			}
			this.getList(getMaterialList)
		}
	},
	computed: {
		...mapState({
			userInfo: state => state.user.user
		}),
		isEnterprise() {
			return (this.userInfo.role_id == 1 || this.userInfo.role_id == 2)
		}
	},
	methods: {
		getList(request) {
			return request(this.params).then((res) => {
				this.completes(res)
				if (this.list.data.length) {
					this.list.data.forEach((item) => {
						if (item.copywritting.length > 60) {
							item.abbrTxt = item.copywritting.substring(0, 38)
							item.toggle = true
						} else {
							item.toggle = false
						}
					})
				}
			})
		},
		setParams(cb) {
			const { page, limit } = this.list
			this.params = { page, limit }
			if (this.option.from !== 'inviteShop') {
				const { resource_type, case_article_id } = this.option
				this.params = {
					id: case_article_id,
					resource_type,
					role_type: '',
					...this.params
				}
			}
			if (cb && typeof cb === 'function') {
				if (this.option.from === 'inviteShop') {
					cb(getInviteShopMaterialList)
				} else {
					cb(getMaterialList)
				}
			}
		},
		toPublish(id) {
			const params = this.option
			if (id) {
				params.rm_id = id
			}
			uni.navigateTo({
				url: `/pages/getGuest/publishMaterial?${qs.stringify(params)}`
			})
		},
		delItem(id) {
		    let that = this
			uni.showModal({
				title: '提示',
				content: '确认删除吗？',
				success: res => {
					if (res.confirm) {
						postDelMaterial({ rm_id: id }).then((res) => {
							uni.showToast({
								title: '删除成功',
								icon: 'none',
								mask: true
							})
							this.resetList()
							if (that.option.from === 'inviteShop') {
								this.getList(getInviteShopMaterialList)
							} else {
								that.getList(getMaterialList)
							}
						})
					}
				}
			})
		},
		downloadPoster(id, imgArr, index) {
			const idx = imgArr.length
			const priviewArr = [...imgArr]
			const { poster_url } = this.list.data[index]
			const userInfo = this.$store.state.user.basicUser || this.$store.state.user.user
			const _spliceUrl = userInfo.role_id == 3 ? 'person' : userInfo == 2 ? 'material' : 'company'
			const _startUrl = this.$constant.formal + '/hkds/#/' + _spliceUrl
			const _endUrl = '?owner_user_id=' + userInfo.user_id + '&f=poster'
			const case_article_id = this.option.case_article_id
			const type = this.option.resource_type
			let posterUrl = ''

			if (type == '1') {
				posterUrl = `${_startUrl}/article/detail${_endUrl}&gobackt=normal&mainId=${case_article_id}&articleid=null`
			} else if (type == '2') {
				posterUrl = `${_startUrl}/case/detail${_endUrl}&gobackt=normal&mainId=${case_article_id}&caseid=null`
			}

			const params = {
				rm_id: id,
				resource_type: this.option.resource_type,
				url: posterUrl
			}
			if (this.option.case_article_id) {
				params.id = this.option.case_article_id
			}
			if (poster_url) {
				downloadPoster(params)
				priviewArr[idx] = poster_url
				uni.previewImage({
					urls: priviewArr,
					loop: true
				})
				this.imgTip()
				return
			}
			downloadPoster(params).then((res) => {
				this.list.data[index].poster_url = res.data.poster_url
				priviewArr[idx] = res.data.poster_url
				uni.previewImage({
					urls: priviewArr,
					loop: true
				})
				this.imgTip()
			})
		},
		switchTab(index) {
			this.activeIndex = index
		},
		preview(imgArr, index) {
			uni.previewImage({
				current: index,
				urls: imgArr,
				loop: true
			})
			this.imgTip()
		},
		imgTip() {
			uni.showToast({
				title: '长按可保存图片',
				icon: 'none',
				position: 'bottom'
			})
		},
		toggle(flag, index) {
			this.$set(this.list.data, index, { ...this.list.data[index], toggle: flag })
		},
		copy(txt) {
			console.log(txt, '123546789')
			uni.setClipboardData({
				data: txt,
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'none',
						mask: true
					})
				},
				fail: () => {
					uni.showToast({
						title: '复制失败，请重试',
						icon: 'none',
						mask: true
					})
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
.toggleBtn {
    color: #1E40A6;
}
.tab {
    padding: 0 29px;
    height: 90px;
    display: flex;
    align-items: center;
    position: fixed;
    background-color: #fff;
    width: 100%;
    z-index: 999;
    // top: 92px;
    left: 0;
    right: 0;
    .item {
        font-size:28px;
        color:rgba(102,102,102,1);
        &.on {
            color:rgba(255,105,0,1);
        }
        & + .item {
            margin-left: 70px;
        }
    }
}
.list {
    padding-top: 90px;
    .item {
        background-color: #fff;
        margin-top: 20px;
        padding: 30px;
        .top_info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left {
                display: flex;
                align-items: center;
                .img_wrap {
                    width: 66px;
                    height: 66px;
                   // background: url('~@/assets/image/getguest/guest_btn.png') no-repeat center/cover;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .name {
                    padding-left: 13px;
                    font-size:32px;
                    font-weight:600;
                    color:rgba(51,51,51,1);
                }
            }
            .right {
                font-size:24px;
                color:rgba(153,153,153,1);
            }
        }
        .content {
            padding-left: 81px;
            .share_title {
              font-size:28px;
              color: #999;
            }
            .txt {
                font-size:28px;
                color:rgba(102,102,102,1);
                line-height:42px;
            }
            .imgs_wrap {
                display: flex;
                flex-wrap: wrap;
                // justify-content: space-between;
                .img_item {
                    width: calc(33% - 8px);
                    margin-right: 12px;
                    height: 196px;
                    margin-top: 10px;
                    &:nth-child(3n) {
                        margin-right: 0;
                    }
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .info {
                font-size:24px;
                color:rgba(153,153,153,1);
                line-height: 1;
                margin-top: 20px;
            }

        }
        .option_bar {
          display: flex;
          margin-top: 19px;
          justify-content: flex-end;
          align-items: center;
          .btn {
              display: block;
              line-height: 60px;
              height:60px;
              text-align: center;
              border-radius:30px;
              font-size:28px;
              color:rgba(51,51,51,1);
              margin-left: 20px;
              &.edit,&.del {
                  padding: 0 43px;
                  background:rgba(255,255,255,1);
                  border:1px solid rgba(238, 238, 238, 1);
              }
              &.downShare {
                  padding: 0 25px;
                  background:rgba(255,209,26,1);
                  border: 0 none;
              }
          }
        }
    }
}

.fixedBtn {
    display: block;
    width: 103px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    right: 30px;
    bottom: 164px;
    z-index: 999;
    .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width:90px;
        height:90px;
        background:rgba(255,209,26,1);
        border:2px solid rgba(255, 255, 255, 0.89);
        box-shadow:0px 1px 21px 0px rgba(153,153,153,0.2);
        border-radius:50%;
        .iconboldplus {
            font-size: 38px;
        }
    }
    .tip {
        text-align: center;
        padding: 3px 0 4px;
        font-size:24px;
        color:rgba(58,27,4,1);
        background:rgba(255,209,26,1);
        position: absolute;
        top: 64px;
        left: 0;
        bottom: 0;
        // width: 100%;
        width: 103px;
        letter-spacing: 0;
    }
}
</style>
